<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>规格型号</title>
    <%@include file="/WEB-INF/pages/common/taglib.jsp" %>
    <%@include file="/WEB-INF/pages/common/common.jsp" %>
</head>
<body>
<div class="content content_frame">
    <h3 class="mainTitle"></h3>
    <br/>
    <ul class="contentNav dib-wrap">
        <li class="dib">
            <a id="btnSave">
                <i class='fa fa-save'></i>&nbsp;&nbsp;确&nbsp;定</a>
        </li>
        <li class="dib">
            <a href="javascript:cancel();">
                <i class='fa fa-reply'></i>&nbsp;&nbsp;取&nbsp;消</a>
        </li>
    </ul>
    <br/>
    <form action="">
        <table class="table3">
            <tr>
                <th colspan="2">HS编码:${hsCodeZ}</th>
            </tr>
            <c:if test="${null==models}">
                <tr>
                    <th colspan="2" align="center">无相关申报要素，如需要请手动填写！</th>
                </tr>
            </c:if>
            <c:if test="${null!=models}">
                <tr>
                    <td colspan="2" align="center">规格型号（根据海关规定，以下带*要素应全部填报）</td>
                </tr>
                <c:forEach var="modval" items="${models}">
                    <tr>
                        <td style="width: 30%">
                            &nbsp;${modval}
                            <c:if test="${!fn:contains(modval, '其他')}">
                                <span style="color: red">*</span>
                            </c:if>
                        </td>
                        <td style="width: 70%">
                            <label><input type="text" name="modelVal" class="input1"
                                    <c:if test="${fn:contains(modval, '其他')}">
                                        required="false"
                                    </c:if>/>
                            </label>
                        </td>
                    </tr>
                </c:forEach>
            </c:if>
            <tr>
                <td colspan="2">规格型号:
                    <input style="width:90%;" readonly="readonly" type="text" id="modelValT"/><span
                            id="modelLen">0</span><span>/255</span>
                </td>
            </tr>
        </table>
    </form>
</div>
</body>
<script type="text/javascript">

    //    var isIE = !!window.ActiveXObject;
    //    var isIE6 = isIE && !window.XMLHttpRequest;
    //    var isIE8 = isIE && !!document.documentMode;
    //    var isIE7 = isIE && !isIE6 && !isIE8;

    $("input[name='modelVal']").on('propertychange', function () {
        setModelVal();
    });

    $("body").on("propertychange input", "[name='modelVal']", function () {
        setModelVal();
        setModelLength();
    });

    //    // modify by steven for jquery 绑定以上事件ie8不支持，修改为以下代码
    //    $(":input[name='modelVal']").bind(isIE ? "propertychange" : "input", propertyChange);

    function setModelVal() {
        var modelValT = "";
        $("input[name='modelVal']").each(function () {
            if (modelValT == "") {
                $("#modelValT").val($.trim(this.value));
                modelValT = $.trim(this.value);
            } else {
                if ("" != $.trim(this.value)) {
                    $("#modelValT").val($("#modelValT").val() + "|" + $.trim(this.value));
                }
            }
        });
    }
    function setModelLength() {
        $("#modelLen").html(getStrLeng($("#modelValT").val()));
    }

    function propertyChange() {
        setModelVal();
        setModelLength();
    }

    $(document).ready(function () {

        $("input[name='modelVal']").blur(function () {
            propertyChange();
        });

        if ('' == '${models}') {
            $("#modelValT").removeAttr("readonly");
            $("#modelValT").focus();
        } else {
            $("table").find("input").first().focus();
        }
        //修改时候 原值回显
        var thisVal = '${thisVal}';
        if (null != thisVal && '' != thisVal) {
            var arry = thisVal.split("|");
            var inputModel = $("input[name='modelVal']");
            if (null != arry && arry.length > 0) {
                for (var i = 0; i < arry.length; i++) {
                    if (inputModel[i]) {
                        inputModel[i].value = arry[i];
                    }
                }
            }
            $("#modelValT").val(thisVal);
            setModelLength();
        }

        $("#btnSave").click(function () {
            saveModel();
        });

        $.fastinput.load({callback: saveModel});
    });

    function saveModel() {
        var isNotEmpty = true;
        if ('' != $.trim($("#modelValT").val())) {
            $("input[name='modelVal']").each(function () {
                if ("" == $.trim($(this).val()) && $(this).attr('required') == undefined) {
                    layer.tips('此规格型号不能为空！', $(this), {
                        tips: [1, '#b94a48'] //还可配置颜色
                    });
                    $(this).focus();
                    isNotEmpty = false;
                    return false;

                }
            });
            if ($("#modelLen").html() > 255) {
                layer.tips('字段长度超过限制，最多输入255个字符！', '#modelValT', {
                    tips: [1, '#b94a48'] //还可配置颜色
                });
                return false;
            }
            if (!new RegExp("^[\\S]{1,255}$", "gim").test($("#modelValT").val())) {
                layer.tips('不允许包含空格、换行、tab缩进！', '#modelValT', {
                    tips: [1, '#b94a48'] //还可配置颜色
                });
                return false;
            }
        }
        if (isNotEmpty) {
            window.parent.getModelVal($("#modelValT").val());
            closeModelC(parent.layer.getFrameIndex(window.name));
        }
    }

    function getStrLeng(str) {
        var realLength = 0;
        var len = str.length;
        var charCode = -1;
        for (var i = 0; i < len; i++) {
            charCode = str.charCodeAt(i);
            if (charCode >= 0 && charCode <= 128) {
                realLength += 1;
            } else {
                // 如果是中文则长度加3
                realLength += 3;
            }
        }
        return realLength;
    }

    function closeModelC(index) {
        var input = $("#modelValT").closest("input");
        if (input.length > 0) {
            input.focus();
        } else {
            $("#modelValT").closest("div").next().find("input").focus();
        }
        parent.layer.close(index); //执行关闭
    }

    function cancel() {
        parent.layer.close(parent.layer.getFrameIndex(window.name)); //执行关闭
    }
</script>
</html>
